<template>
  <div v-if="form.admission_time" class="container">
    <div class="table">
      <h2>支持系统</h2>
      <table>
        <tr>
          <Item
            class="w-40"
            header
            idx="1"
            label="对自己的感觉"
            :value="form[config['支持系统']['line1']['对自己的感觉'].key].value"
          />
          <Item
            label="心情温度计自我检测"
            idx="2"
            :value="
              form[config['支持系统']['line1']['心情温度计自我检测'].key].value
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="3"
            label="对情绪的控制的能力"
            :value="
              form[config['支持系统']['line2']['对情绪的控制的能力'].key].value
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="4"
            label="情感"
            :value="
              formatOptions('支持系统', 'line3', '情感选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            header
            idx="5"
            label="压力源"
            :value="
              formatOptions('支持系统', 'line4', '压力源选项', '选项', '内容')
            "
          />
        </tr>
        <tr>
          <Item
            class="w-50"
            header
            idx="6"
            label="主要支持者"
            :value="form[config['支持系统']['line5']['主要支持者'].key].value"
          />
          <Item
            label="与病人关系"
            :value="form[config['支持系统']['line5']['与病人关系'].key].value"
          />
        </tr>
      </table>
    </div>
    <div class="plan">
      <p>出院计划：</p>
      <ul>
        <li>
          1、出院后去处：{{
            formatOptions('出院计划', 'line1', '出院后去处选项', '选项', '内容')
          }}
        </li>
        <li>
          2、出院后照顾者：{{
            form[config['出院计划']['line1']['出院后照顾者'].key].value
          }}
        </li>
        <li>
          3、交通工具：{{
            form[config['出院计划']['line1']['交通工具'].key].value
          }}
        </li>
        <li>
          4、康复器具：{{
            formatOptions('出院计划', 'line2', '康复器具选项', '选项', '内容')
          }}
        </li>
        <li>
          5、其他预期需求：{{
            formatOptions(
              '出院计划',
              'line3',
              '其他预期需求选项',
              '选项',
              '内容'
            )
          }}
        </li>
      </ul>
    </div>

    <table class="sum">
      <tr>
        <td class="label">资料来源</td>
        <td>{{ data.dataSrc === '其他' ? data.dataExt : data.dataSrc }}</td>
      </tr>
      <tr>
        <td class="label">评估时间</td>
        <td>
          <span>{{ formatTime(data.pfTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
          <span class="sign">评估护士签名：{{ data.updateName }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'

import { formatTime } from '@/utils/format'
import config from '@/views/homeNew/evaluation/json/adult.json' //配置信息

import Item from '../RYItem.vue'

export default defineComponent({
  components: { Item },
  props: {
    data: {
      type: Object,
      default: () => {
        return { jsonText: '{}' }
      }
    }
  },
  setup(props) {
    const state = reactive({
      date: '',
      value: '12',
      config: config,
      form: {}
    })

    function initData() {
      //初始化数据
      const form = {}, //表单对象
        config = cloneDeep(state.config) //配置项
      for (const region in config) {
        //遍历isVisible为true的对象-每个区域
        if (config[region].info.isVisible) {
          for (const line in config[region]) {
            //遍历除了info的对象-每行
            if (line != 'info') {
              for (const item in config[region][line]) {
                //遍历除了info的对象-每个formitem
                if (item != 'info') {
                  const obj = config[region][line][item]
                  form[obj.key] = {
                    label: obj.title,
                    value: ''
                  }
                }
              }
            }
          }
        }
      }
      //由于Object.assign对于子对象的处理是直接覆盖，所以需要循环赋值，用于保留子对象的其余参数
      const _data = JSON.parse(props.data.jsonText) || {}
      for (const i in form) {
        form[i] = Object.assign(form[i], _data[i] || '')
      }
      state.form = form
    }

    function formatOptions(el1, el2, el3, reText = '选项', text = '其他') {
      const obj = config[el1][el2][el3]
      let returnText
      if (Array.isArray(state.form[obj.key].value)) {
        const myarray = []
        state.form[obj.key].value.map(item => {
          if (obj.resetCont === item || obj.unitBool) {
            el3 = reText ? el3.replace(reText, text) : el3 + text
            myarray.push(state.form[config[el1][el2][el3].key].value)
          } else {
            myarray.push(item)
          }
        })
        returnText = myarray.join('，')
      } else {
        if (obj.resetCont === state.form[obj.key].value || obj.unitBool) {
          el3 = reText ? el3.replace(reText, text) : el3 + text
          returnText = state.form[config[el1][el2][el3].key].value
        } else {
          returnText = state.form[obj.key].value
        }
      }
      return returnText
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      formatTime,
      formatOptions
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

.container {
  padding-top: getpx(50);
  margin: getpx(30) auto 0;
  width: calc(100% - 126px);
  border-top: 1px solid #000;
  font-family: SiYuanSong-Medium;
}

table {
  width: 100%;
  // margin-left: -1px;
  border-collapse: collapse;

  tr {
    display: flex;
    align-items: center;
    border: $border;
    border-top: none;

    &:not(:first-child) {
      // margin-top: -1px;
    }

    td {
      padding: 2px;
      height: 19px;
      display: flex;
      align-items: center;
      font-size: getpx(36);
    }
  }
}

.table {
  // display: grid;
  // grid-template-columns: getPx(170) auto;
  display: flex;
  box-sizing: border-box;

  & + .table {
    // margin-top: -1px;
  }

  h2 {
    margin: 0;
    width: getpx(170);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    writing-mode: vertical-lr;
    font-weight: normal;
    font-size: getpx(55);
    letter-spacing: getpx(10);
    border: $border;
    border-right: none;
    border-top: none;

    & + h2 {
      // margin-left: -1px;
    }
  }

  &:first-child {
    border-top: $border;
  }
}

.plan {
  // margin-top: -1px;
  padding: getpx(39);
  border: 1px solid #000;
  border-top: none;
  display: grid;
  grid-template-columns: getpx(378) auto;
  line-height: 20px;

  p {
    margin: 0;
    text-align: right;
  }

  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      min-width: calc(33% - 20px);
      margin-right: 20px;
      font-size: getpx(36);
      text-align: left;
    }
  }
}

.sum {
  margin: -1px 0 0;
  width: 100%;

  tr {
    td {
      &.label {
        width: getpx(404);
        height: getpx(65);
        justify-content: center;
        border-right: 1px solid #000;
        font-size: getpx(48);

        &::after {
          content: ':';
        }
      }

      span {
        display: inline-block;

        &.sign {
          width: 50%;
          text-align: left;
        }
      }
    }

    &:nth-child(2) {
      td {
        &:nth-child(2) {
          flex: 2;
          justify-content: space-between;
        }
      }
    }

    &:nth-child(3) {
      span {
        margin-right: getpx(51);
      }
    }
  }
}

.w-10 {
  min-width: 10%;
}

.w-15 {
  min-width: 15%;
}

.w-16 {
  min-width: 16%;
}

.w-17 {
  min-width: 17%;
}

.w-19 {
  min-width: 19%;
}

.w-20 {
  min-width: 20%;
}

.w-25 {
  min-width: 25%;
}

.w-30 {
  min-width: 30%;
}

.w-33 {
  min-width: 33%;
}

.w-40 {
  min-width: 40%;
}

.w-42 {
  min-width: 42%;
}

.w-45 {
  min-width: 45%;
}

.w-50 {
  min-width: 50%;
}

.w-58 {
  min-width: 58%;
}
// input {
//   margin: 0;
//   padding: 0;
//   height: 100%;
//   border: none;
//   outline: none;
//   font-size: getPx(36);
// }
// ::v-deep {
//   .el-input__inner {
//     padding: 0;
//     width: 100%;
//     height: 100%;
//     border: none;
//     font-size: getPx(36);
//     color: #000;
//   }
//   .el-input__prefix,
//   .el-input__suffix {
//     display: none;
//   }
// }
</style>
